<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--插值表达式：vue的一种模版语法 -->
		<div id = "app">
			<p>{{nickname}}</p>
			<p>{{nickname.toUpperCase()}}</p>
			<p>{{nickname+'你好'}}</p>
			<p>{{ age >= 18 ? '成年' : '未成年'}}</p>
			<p>{{friend.name + friend.desc}}</p>
			<p title="abc">我是p标签</p>
		</div>
		
		<!--引入vue2开发版本包 -->
		<!--加载太慢 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
		<script src="js/vue.js"></script>
		<script>
			//全局环境1
			const app = new Vue({
				//通过el配置选择器，指定vue管理的是哪个盒子
				el:'#app',
				//通过data提供数据
				data:{
					nickname:'tony',
					age:18,
					friend:{
						name:'lxp',
						desc:'在学vue'
					}
				}
			})
		</script>
	</body>
</html>